<template>
	<view class="dialog full-screen flex-r" ref="dialog" v-if="show">
		<!-- 特殊免单券 邀请链接+未领取 -->
		<view class="dialogpop flex-c bounceout" v-if="type == 'coupon' && popupData && popupData[0]">
			<view class="coupon flex-c">
				<view class="coupon-box">
					<image class="bgimg" src="@/public/images/other/zsfl_bg.png" mode="aspectFill"></image>
					<view class="detail flex-c">
						<text class="detail-title">{{popupData[0].usedAmount}}</text>
						<text class="detail-desc">最高消费{{popupData[0].usedAmount}}彩虹豆</text>
					</view>
				</view>
				<view class="button flex-c" @tap="receiveCoupon('special')">
					<image src="@/public/images/other/ljlq.png" mode="aspectFit"></image>
				</view>
				<text class="desc">*优惠券仅限APP内消费使用</text>
			</view>
			<view class="popup-close flex-c" @tap="closeDialog">
				<image src="@/public/images/other/qdqxan.png" mode="aspectFit"></image>
			</view>
		</view>
		<!-- 提醒领取一折券 未领取 -->
		<view class="dialogpop flex-c bounceout" v-if="type == 'discount' && popupData && popupData[0]">
			<view class="coupon discount flex-c">
				<view class="coupon-box">
					<image class="bgimg" src="@/public/images/other/tcwan.png" mode="aspectFill"></image>
					<view class="detail flex-c">
						<text class="detail-title">{{popupData[0].usedAmount}}</text>
						<text class="detail-desc">不大于{{popupData[0].usedAmount}}彩虹豆可用</text>
					</view>
				</view>
				<view class="button flex-c" @tap="receiveCoupon('pt_award_LV1')">
					<image src="@/public/images/other/ljlq.png" mode="aspectFit"></image>
				</view>
				<text class="desc">*优惠券仅限APP内消费使用</text>
			</view>
			<view class="popup-close flex-c" @tap="closeDialog">
				<image src="@/public/images/other/qdqxan.png" mode="aspectFit"></image>
			</view>
		</view>
		<!-- 提醒领取优惠券 未领取 -->
		<view class="dialogpop flex-c bounceout" v-if="type == 'receive'">
			<view class="popup-body flex-c">
				<image class="bgimg" :src="popupData.displayUrl" mode="aspectFill" @load="imageLoad" :style="'height:'+image.height+'rpx;width:'+image.width+'rpx;'"></image>
				<view class="button flex-c" @tap="$goByName('receivecoupon')">
					<image src="@/public/images/other/flfs.png" mode="aspectFit"></image>
				</view>
			</view>
			<view class="popup-close flex-c" @tap="closeDialog">
				<image src="@/public/images/other/qdqxan.png" mode="aspectFit"></image>
			</view>
		</view>
		<!-- 排行榜 每天一次 -->
		<view class="dialogrank flex-c bounceout" v-if="type == 'rank'">
			<view class="dialog-head flex-r">
				<image src="@/public/images/components/gb.png" mode="aspectFit" @tap="closeDialog"></image>
			</view>
			<view class="dialog-body flex-c" v-if="popupData[activeKey]">
				<view class="rank-item flex-r" v-for="(expert, indexs) in popupData[activeKey]" :key="indexs" :class="'rank'+indexs" @tap="$CHS.goExpertHome(expert.expertId)">
					<view class="rank-avatar flex-c">
						<lazy-image class="image border-round" :src="expert.expertAvatar+'?imageView2/1/w/100/h/100/q/50'" type="expert" fit="cover"></lazy-image>
						<button v-if="(expert.followStatus == 1 && noFollow.indexOf(expert.expertId) == -1) || isFollow.indexOf(expert.expertId) > -1" class="fav" :class="{'nochat': expert.userIdentity != 1}" size="mini" @tap.stop="$CHS.goChat(expert.expertId, expert.userIdentity)">私信</button>
						<button v-else size="mini" @tap.stop="favExpert(expert.expertId)">关注</button>
					</view>
					<view class="rank-content flex-c">
						<view class="expert-info flex-r">
							<text class="expert-name">{{expert.expertName}}</text>
						</view>
						<view class="expert-tag flex-r">
							<text class="tag-blue" v-if="expert.expertTag">{{expert.expertTag}}</text>
							<text class="tag-red" v-if="expert.hotContineTxt">{{expert.hotContineTxt}}</text>
							<text class="tag-gold" v-else-if="expert.hitResultTxt">{{expert.hitResultTxt}}</text>
						</view>
					</view>
					<view class="rank-score flex-c color-red">
						<text class="score-num" v-if="Number(expert.hitRate)>=60">{{expert.hitRate}}%</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 广告弹窗 每次打开 -->
		<view class="dialogpop flex-c bounceout" v-if="type == 'ads'">
			<view class="popup-body flex-c" v-if="popupData.type == 1">
				<image class="bgimg" :src="popupData.displayUrl" mode="aspectFill" @load="imageLoad" :style="'height:'+image.height+'rpx;width:'+image.width+'rpx;'"></image>
				<view class="button flex-c" @tap="goPopup">
					<image src="@/public/images/other/flfs.png" mode="aspectFit"></image>
				</view>
			</view>
			<view class="popup-body flex-c" v-if="popupData.type == 2 || popupData.type == 5">
				<image class="bgimg h850" src="@/public/images/other/ptlhdr_bg.png" mode="aspectFit" v-if="popupData.type == 2"></image>
				<image class="bgimg h850" src="@/public/images/other/xrzjtj_bg.png" mode="aspectFit" v-else></image>
				<view class="expert flex-c">
					<view class="expert-box flex-r">
						<lazy-image class="expert-avatar border-round" :src="popupData.expertInfo.expertAvatar+'?imageView2/1/w/100/h/100/q/50'" type="expert" fit="cover"></lazy-image>
						<view class="expert-info flex-c">
							<text class="expert-name">{{popupData.expertInfo.expertName}}</text>
							<view class="expert-tag">
								<text class="tag-red" v-if="popupData.expertInfo.hotContineTxt">{{popupData.expertInfo.hotContineTxt}}</text>
								<text class="tag-gold" v-else-if="popupData.expertInfo.hitResultTxt">{{popupData.expertInfo.hitResultTxt}}</text>
								<text class="tag-season" :class="'rank'+popupData.expertInfo.rankTag" v-if="popupData.type == 2 && popupData.expertInfo.seasonRankTag">{{popupData.expertInfo.seasonRankTag}}</text>
							</view>
						</view>
						<view class="author-result-score flex-c" v-if="Number(popupData.expertInfo.hitRate) >= 60">
							<view class="result-score flex-r">
								<text>{{popupData.expertInfo.hitRate}}</text>
								<text>%</text>
							</view>
							<text class="result-des color-red">{{popupData.expertInfo.hitRateName}}</text>
						</view>
					</view>
					<view class="expert-des">
						<view class="remark html-content" id="content" v-html="popupData.title" ></view>
					</view>
				</view>
				<button class="expert-btn" :class="popupData.type == 2 ? 'color-red' : 'color-blue'" @tap="goPopup">查看详情</button>
			</view>
			<view class="popup-body flex-c" v-if="popupData.type == 3">
				<image class="bgimg" :src="popupData.displayUrl" mode="aspectFill" @load="imageLoad" :style="'height:'+image.height+'rpx;width:'+image.width+'rpx;'"></image>
				<view class="button flex-c" @tap="goPopup">
					<image src="@/public/images/other/ckxq.png" mode="aspectFit"></image>
				</view>
			</view>
			<view class="popup-body flex-c" v-if="popupData.type == 4">
				<image class="bgimg h570" src="@/public/images/other/tz_bg2.png" mode="aspectFill" v-if="popupData.isSkip == 1"></image>
				<image class="bgimg h480" src="@/public/images/other/tz_bg.png" mode="aspectFill" v-else></image>
				<view class="notice-detail flex-c" :class="{'more': popupData.isSkip == 1}">
					<view class="detail-text">
						<text class="text" >{{popupData.title}}</text>
					</view>
					<text class="detail-btn" v-if="popupData.isSkip == 1" @tap="goPopup">查看详情</text>
				</view>
			</view>
			<view class="popup-close flex-c" @tap="closeDialog">
				<image src="@/public/images/other/qdqxan.png" mode="aspectFit"></image>
			</view>
		</view>
		<!-- 推荐专家球吧 新用户首次登录 -->
		<view class="dialogrec flex-c bounceout" v-if="type == 'recommend'">
			<view class="rec-body flex-c">
				<template v-if="popupData.expert">
					<text class="list-title">推荐您关注这些大神</text>
					<view class="list-body flex-r">
						<view class="list-item flex-c ac" v-for="(expert, index) in popupData.expert.slice(0, 8)" :key="index" @tap="select(expert, 'expert')">
							<view class="avatar">
								<lazy-image class="inheritwh border-round" :src="expert.avatar+'?imageView2/1/w/100/h/100/q/50'" type="expert" fit="cover"></lazy-image>
								<image class="select-icon" :src="selectData.expert.includes(expert.expertId) ? require('@/public/images/components/xz.png') : require('@/public/images/components/wxz.png')" mode="aspectFit"></image>
							</view>
							<text class="text-secondary">{{expert.realname}}</text>
							<text class="text-mini text-hidden color-red">{{expert.tag}}</text>
						</view>
					</view>
				</template>
				<!-- <template v-if="popupData.ballbar">
					<text class="list-title">推荐球吧</text>
					<view class="list-body flex-r">
						<view class="list-item flex-c ac" v-for="(bar, index) in popupData.ballbar.slice(0, 4)" :key="index" @tap="select(bar, 'ballbar')">
							<view class="avatar">
								<lazy-image class="inheritwh border-round" :src="bar.logo+'?imageView2/1/w/100/h/100/q/50'" type="bar" fit="cover"></lazy-image>
								<image class="select-icon" :src="selectData.ballbar.includes(bar.id) ? require('@/public/images/components/xz.png') : require('@/public/images/components/wxz.png')" mode="aspectFit"></image>
							</view>
							<text class="text-secondary">{{bar.title}}</text>
							<text class="text-mini text-hidden">{{bar.num}}粉丝</text>
						</view>
					</view>
				</template> -->
			</view>
			<view class="rec-foot flex-r ac">
				<button class="button flex-r ac jc" @tap="closeDialog">关闭</button>
				<button class="button flex-r ac jc active" @tap="submitFollow">一键关注</button>
			</view>
		</view>
		<!-- 热帖推荐弹窗 -->
		<!-- <view class="dialoghot flex-c ac bounceout" v-if="type == 'discuss'">
			<view class="hot-head flex-r ac jsb">
				<image class="text-icon" src="@/public/images/components/rttj.png" mode="aspectFit"></image>
				<button class="change-btn color-white text-info flex-r ac jc" @tap="changeDiscuss">换一换</button>
				<image class="close-icon" src="@/public/images/components/qdqxan.png" mode="aspectFit" @tap="closeDialog"></image>
			</view>
			<view class="hot-body flex-c" v-if="discussData && discussData.id">
				<view class="barinfo flex-r ac">
					<lazy-image class="barinfo-logo border-round" :src="discussData.logo" fit="cover" type="bar"></lazy-image>
					<text class="barinfo-name text-large">{{discussData.forumName}}</text>
					<button class="barinfo-favbtn text-small color-red flex-r ac jc" @tap="followBar">{{ discussData.followStatus === 1 ? '已关注' : '+关注'}}</button>
				</view>
				<view class="discuss mt20 flex-c" ref="hotBody" @tap="goDetail(discussData)">
					<text class="discuss-title color-white text-primary text-hidden two">{{discussData.title}}</text>
					<view class="discuss-info flex-r ac jsb text-mini">
						<text>发布于{{discussData.nickname}}</text>
						<uni-dateformat :date="discussData.displayTime" :threshold="[60000, 12*3600000]" format="MM-dd hh:mm"></uni-dateformat>
					</view>
					<view class="discuss-detail" ref="hotDetail">
						<view class="vote-info" v-if="discussData.type == 7 && discussData.discussOption">
							<view class="vote-other flex-c ac">
								<template v-for="(vote, index) in discussData.discussOption">
									<view class="vote-item flex-r ac jsb text-small color-white" :class="{'active': vote.voteFlag}" :key="index" @tap.stop="voteSubmit(index)">
										<view class="progress" :style="'width:' + (discussData.participateNum ? vote.voteNum / discussData.participateNum * 100 : 0) + '%;'"></view>
										<view class="left flex-r ac">
											<text class="text-hidden">{{vote.title}}</text>
											<image class="select-icon" src="@/public/images/components/xzdh.png" mode="aspectFit" v-if="vote.voteFlag"></image>
										</view>
										<text>{{vote.voteNum}}</text>
									</view>
								</template>
							</view>
						</view>
						<view class="video-info" v-else-if="discussData.videoUrl" @tap.stop="videoPlay(discussData.id, discussData.videoUrl)">
							<FullVideo :url="discussData.videoUrl" :article="true" width="520rpx" height="292rpx"></FullVideo>
						</view>
						<view class="html-content" v-html="discussData.content" v-else></view>
						<view class="mask-view" v-show="discussData.type != 7 && showMask"></view>
					</view>
					<button class="discuss-btn color-red text-info flex-r ac jc">查看详情</button>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	/**
	 * ShowDialog 首页弹窗
	 * @description 展示首页弹窗，包含优惠券领取、排行榜、广告、新用户推荐关注等
	 * @example <ShowDialog></ShowDialog>
	 */
	export default {
		name: "ShowDialog",
		emits: ['close'],
		/* props: {
			type: {
				type: String,
				default: 'rank'
			},
			popupData: {
				type: [Array,Object],
				default: ()=>[]
			}
		}, */
		data() {
			return {
				show: false, //是否显示弹窗
				popupData: {},
				type: undefined,
				
				activeKey: 'sevenDays', //排行榜类型
				
				image: { //popup图片宽高
					height: 660,
					width: 790
				},
				
				selectData: { //选择关注数据
					expert: [],
					ballbar: []
				},
				
				showMask: false, //超出隐藏
				discussData: {}, //讨论帖详情对象
				discussIndex: 0 //查询索引
			};
		},
		computed: {
			user() {
				return this.$store.state.user
			},
			isLogin() {
				return this.$store.state.isLogin
			},
			noFollow() {
				return this.$store.state.expertNoFollow
			},
			isFollow() {
				return this.$store.state.expertFollow
			}
		},
		watch: {
			type(newValue) {
				if(newValue){
					this.show = true
					if(newValue == 'recommend'){//默认全选
						for(let item of this.popupData.expert){
							this.selectData.expert.push(item.expertId)
						}
						for(let item of this.popupData.ballbar){
							this.selectData.ballbar.push(item.id)
						}
					}
					if(newValue == 'discuss'){
						this.discussData = this.popupData
						this.discussData.content = this.$CHS.filterRichText(this.discussData.content)
						this.discussData.content = this.filterEmptyTag(this.discussData.content)
						this.$nextTick(()=>{
							this.showMask = this.$refs.hotDetail.$el.scrollHeight >= this.dpr * 600
						})
					}
				}else{
					this.popupData = {}
				}
			}
		},
		mounted() {
			console.log(this.popupData);
			let windowWidth = uni.getWindowInfo().windowWidth
			if(windowWidth){
				this.dpr = windowWidth / 750
			}else{
				this.dpr = 0.5
			}
		},
		deactivated() {
			console.log('deactivated');
			//移除动画效果
			if(this.$refs.dialog?.$children[0]){
				this.$refs.dialog.$children[0].$el.classList.remove('bounceout')
			}
			if(this.$refs.hotBody){
				this.$refs.hotBody.$el.classList.remove('heightam')
			}
		},
		methods: {
			//新用户弹窗数据查询
			async showNewUserPopup(expertList) {
				if(this.isLogin){
					let nextPopup = true
					try{
						let res = await this.$http.get({
							url: '/api/forum/list',
							data: {
								pageNo: 1,
								pageSize: 4
							}
						})
						if(res && res.success){
							if(res.result && res.result.total){
								this.popupData = {
									ballbar: res.result.records,
									expert: expertList
								}
								this.type = 'recommend'
								nextPopup = false
							}
						}
					}catch(e){
						console.log(e);
					}
					//数据异常时加载其他弹窗
					if(nextPopup){
						this.showOtherPopup('recommend')
					}
				}
			},
			//查询首页主要弹窗
			async showHomePopup() {
				if(this.isLogin){
					let nextPopup = true
					let special = sessionStorage.getItem('specialCode')
					let today = this.$CHS.getNowDate()
					let popup = uni.getStorageSync('popup') || '{}'
					popup = JSON.parse(popup)
					// h5 免单券
					if( special ){
						try{
							let res = await this.$http.get({
								url: '/api/appUser/querySpecialUserReceiveCoupon',
								data: {
									userId: this.user.userId,
									userType: special
								}
							})
							if(res && res.success){
								if(res.result && res.result[0]){
									this.popupData = res.result
									this.type = 'coupon'
									nextPopup = false
								}else{
									sessionStorage.removeItem('specialCode')
								}
							}
						}catch(err){
							console.log(err);
						}
					}
					// h5 一折券
					if(nextPopup && (!popup.coupon || popup.coupon.today != today || popup.coupon.userId != this.user.userId)){
						try{
							let res = await this.$http.get({
								url: '/api/appUser/queryUserReceiveCoupon',
								data: {
									userId: this.user.userId
								}
							})
							if(res && res.success){
								if(res.result && res.result[0]){
									this.popupData = res.result
									this.type = 'discount'
									nextPopup = false
									popup.coupon = { today, userId: this.user.userId }
									uni.setStorageSync('popup', JSON.stringify(popup))
								}
							}
						}catch(err){
							console.log(err);
						}
					}
					//优惠券领取提醒
					if(nextPopup) {
						try{
							let res = await this.getCouponPopup()
							if(res && res.success && res.result){
								this.popupData = res.result
								this.type = 'receive'
								nextPopup = false
							}
						}catch(err){
							console.log(err);
						}
					}
					//其他弹窗
					if(nextPopup){
						this.showOtherPopup('receive')
					}
				}
			},
			//首页其他广告弹窗
			async showOtherPopup(type) {
				console.log(type);
				this.type = null
				//this.popupData = null
				if(this.isLogin && type && type != 'discuss'){
					if(type == 'recommend'){
						try{
							let res = await this.getCouponPopup()
							if(res && res.success && res.result){
								this.popupData = res.result
								this.type = 'receive'
							}else{
								this.$store.commit('UPDATE_USERINFO', { isFirstRegistration: false });
							}
						}catch(err){
							console.log(err);
						}
					}else{
						let nextPopup = true
						let today = this.$CHS.getNowDate()
						let popup = uni.getStorageSync('popup') || '{}'
						popup = JSON.parse(popup)
						console.log(popup,'popup')
						if(type == 'receive') {
							//排行榜弹窗
							if(!popup.rank || popup.rank.today != today || popup.rank.userId != this.user.userId){
								try{
									let res = await this.$http.get({
										url: '/api/user/home/expertRankRows'
									})
									if(res && res.success && res.result){
										if(res.result.sevenDays && res.result.sevenDays[0]){
											this.popupData = res.result
											this.type = 'rank'
											nextPopup = false
											popup.rank = { today, userId: this.user.userId }
											uni.setStorageSync('popup', JSON.stringify(popup))
										}
									}
									
								}catch(err){
									console.log(err);
								}
							}
						}
						if(type == 'rank' || (nextPopup && type != 'ads')){
							console.log(nextPopup,type,'rank')
							try{
								let res = await this.$http.get({
									url: '/api/appUser/queryHomePagePopup'
								})
								if(res && res.success){
									if(res.result){
										this.popupData = res.result
										this.type = 'ads'
										nextPopup = false
									}
								}
							}catch(err){
								console.log(err);
							}
						}
						/* if(nextPopup && type == 'receive' && (!popup.discuss || popup.discuss.today != today || popup.discuss.userId != this.user.userId)){
							try{
								let res = await this.$http.get({
									url: '/api/user/home/recommended/post',
									data: {
										num: 0
									}
								})
								if(res && res.success){
									if(res.result){
										this.popupData = res.result
										this.type = 'discuss'
										
										popup.discuss = { today, userId: this.user.userId }
										uni.setStorageSync('popup', JSON.stringify(popup))
									}
								}
							}catch(err){
								console.log(err);
							}
						} */
					}
				}
			},
			//未领取优惠券弹窗
			getCouponPopup() {
				return new Promise((resolve, reject) => {
					this.$http.get({
						url: '/api/appUser/coupon/popup'
					}).then(res => {
						console.log('coupon', res);
						resolve(res)
					}).catch((err)=>{
						reject(err)
					})
				})
			},
			/**
			 * @description 弹窗跳转
			 */
			goPopup() {
				if(this.popupData.isSkip == 1){
					if(this.popupData.type == 1){//打开特定页面
						if(this.popupData.title == 'new_award'){
							this.$goByName('receivecoupon')
						}else if(this.popupData.title == 'recharge'){
							this.$CHS.goRecharge()
						}else{
							//other
						}
					}else if(this.popupData.type == 2 || this.popupData.type == 5){
						if(this.popupData.sourceFrom){//打开专家介绍页面
							this.$goByName('expertdetail', {eid: this.popupData.sourceFrom, random: Date.now()})
						}
					}else if(this.popupData.type == 3){
						if(this.popupData.sourceFrom){//打开料详情
							this.$CHS.goArticleDetail(this.popupData.sourceFrom)
						}
					}else if(this.popupData.type == 4){
						if(this.popupData.sourceFrom){//打开外部链接
							let params = {src: this.popupData.sourceFrom}
							this.$goByName('webview', params)
						}
					}
					this.closeDialog()
				}
			},
			/**
			 * @description 广告图加载完成回调，获取图片宽高
			 * @param {object} event 图片对象
			 */
			imageLoad(event){
				this.image = event.detail
			},
			/**
			 * @description 关注专家
			 * @param {string} eid 专家ID
			 */
			favExpert(eid) {
				if(!this.$store.state.isLogin){
					this.$CHS.goUserLogin()
					return
				}
				if(eid === this.isFaving){
					return
				}else{
					this.isFaving = eid
					this.$CHS.favExpert(eid).finally(()=>{
						this.isFaving = null
					})
				}
			},
			/**
			 * @description 领取优惠券
			 * @param {string} sourceFrom 优惠券来源
			 */
			receiveCoupon(sourceFrom) {
				console.log(this.popupData);
				let couponIds = []
				this.popupData.forEach( (item) => {
					if(!item.isReceive){
						couponIds.push(item.awardCouponId)
					}
				})
				this.$http.post({
					url: '/api/appUser/receiveCouponsByUserId',
					data: {
						couponIds: couponIds.toString(),
						sourceFrom,
						userId: this.user.userId
					},
				}).then(data => {
					console.log(data);
					if(data.success){
						this.show = false //先关闭弹窗，便于展示领取成功提示
						uni.showToast({
							title: '领取成功！',
							icon: 'success'
						})
						this.$ShowToast({text: '领取成功，请下载APP使用优惠券', time: 3})
						if(sourceFrom == 'special'){
							sessionStorage.removeItem('specialCode')
						}
						setTimeout(()=>{//延迟展示其他弹窗
							this.closeDialog()
						}, 1500)
					}else{
						uni.showToast({
							title: data.message,
							icon: 'none'
						})
					}
				}).catch((err) => {
					console.log(err)
				})
			},
			/**
			 * @description 选择关注的专家或球吧
			 * @param {object} data 选择的数据对象
			 * @param {string} type 选择数据类型
			 */
			select(data, type) {
				console.log(data);
				if(type == 'expert'){
					if(this.selectData.expert.includes(data.expertId)){
						this.selectData.expert = this.selectData.expert.filter(item => item != data.expertId)
					}else{
						this.selectData.expert.push(data.expertId)
					}
				}else if(type == 'ballbar'){
					if(this.selectData.ballbar.includes(data.id)){
						this.selectData.ballbar = this.selectData.ballbar.filter(item => item != data.id)
					}else{
						this.selectData.ballbar.push(data.id)
					}
				}
			},
			/**
			 * @description 一键关注
			 */
			submitFollow() {
				if(this.selectData.expert[0] || this.selectData.ballbar[0]){
					this.$http.post({
						url: '/api/user/home/follow',
						data: {
							expertIds: this.selectData.expert,
							forumIds: this.selectData.ballbar
						}
					}).then(data => {
						console.log(data);
						if(data.success){
							this.closeDialog()
							this.$ShowToast({text: data.message || '关注成功', type: 1})
						}else{
							uni.showToast({
								title: data.message || '关注失败，请重试',
								icon: 'none'
							})
						}
					})
				}else{
					uni.showToast({
						title: '请选择关注的专家或球吧',
						icon: 'none'
					})
				}
			},
			/**
			 * @description 换一换
			 */
			changeDiscuss(){
				if(this.$refs.hotBody){
					this.$refs.hotBody.$el.classList.remove('heightam')
				}
				this.discussIndex = this.discussIndex >= 10 ? 0 : this.discussIndex + 1
				this.$http.get({
					url: '/api/user/home/recommended/post',
					data: {
						num: this.discussIndex
					}
				}).then((data) => {
					if(data.success && data.result){
						this.discussData = data.result
						this.discussData.content = this.$CHS.filterRichText(this.discussData.content)
						this.discussData.content = this.filterEmptyTag(this.discussData.content)
						if(this.$refs.hotBody){
							this.$refs.hotBody.$el.classList.add('heightam')
						}
						this.$nextTick(()=>{
							this.showMask = this.$refs.hotDetail.$el.scrollHeight >= this.dpr * 600
						})
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			/**
			 * @description 关注球吧
			 * @param {Object} followStatus 关注状态
			 */
			followBar() {
				if(this.discussData.followStatus === 1){
					return
				}
				if(!this.isFaving){
					this.isFaving = true
					this.$http.post({
						url: '/api/forum/user/follow',
						data: {
							id: this.discussData.forumId,
							status: 1
						}
					}).then((data)=>{
						if(data.success){
							this.$ShowToast({text: data.message || '已关注', type: 1})
							this.$set(this.discussData, 'followStatus', 1)
						}else{
							uni.showToast({
								title: data.message || '操作失败，请稍后重试',
								icon: 'none'
							})
						}
					}).catch((err) => {
						console.log(err);
					}).finally(()=>{
						this.isFaving = false
					})
				}
			},
			/**
			 * @description 过滤空标签
			 * @param {String} str
			 * @return {String}
			 */
			filterEmptyTag(str){
				str = str.replace(/(<br\s?\/?>){2,}/ig, '$1');
				str = str.replace(/(<br\s?\/?>\s*)+<p>/ig, "<p>");
				str = str.replace(/(<br\s?\/?>\s*)+<\/p>/ig, "</p>");
				str = str.replace(/<([a-z]+?)(?:\s+?[^>]*)?>(\s|&nbsp;)*?<\/\1>/ig, "")
				return str
			},
			/**
			 * @description 提交投票
			 * @param {object} article - 方案数据对象
			 * @param {number} index - 索引
			 */
			voteSubmit(index) {
				if(this.isSubmit){
					return
				}
				let vote = this.discussData.discussOption
				let status = vote.every(item => !item.voteFlag)
				if(status){
					this.isSubmit = true
					this.$http.post({
						url: '/api/chtyForumDiscussRecord/add',
						data: {
							id: vote[index].id,
							status: 1
						}
					}).then(data => {
						console.log(data);
						if(data.success){
							this.$ShowToast({text: data.message || '投票成功', type: 1})
							this.discussData.participateNum = this.discussData.participateNum + 1
							vote[index].voteFlag = true
							vote[index].voteNum = Number(vote[index].voteNum) + 1
						}else{
							this.$ShowToast({text: data.message || '投票失败，请稍后重试', type: 2})
						}
					}).finally(()=>{
						this.isSubmit = false
					})
				}else{
					uni.showToast({
						title: '您已完成投票',
						icon: 'none'
					})
				}
			},
			/**
			 * @description 进入详情
			 * @param {object} article - 数据对象
			 */
			goDetail(article) {
				if(article.blacklist === 1 && (article.userType != 'user' || article.userId != this.user.userId)){
					this.$ShowToast({text: '您已被拉入黑名单，不能访问当前内容', type: 2, time: 3})
					return
				}
				let params = {barId: article.forumId, barName: article.forumName, barLogo: article.logo, type: article.userType || 'expert'}
				if(article.type == 1 || article.type == 99) {
					this.$CHS.goArticleDetail(article.id, params)
				}else if(article.type == 2){
					this.$CHS.goShareDetail(article.id, params)
				}else if(article.type == 6 || article.type == 7){
					this.$CHS.goDiscussDetail(article.id, params)
				}
			},
			//视频播放
			videoPlay(aid, path) {
				if(path.indexOf(this.$store.state.videoDomain) > -1){
					path = path.substr(this.$store.state.videoDomain.length + 1)
				}
				let params = {aid, path}
				this.$Router.push({ name: 'videoplay', params })
			},
			/**
			 * @description 关闭弹窗
			 */
			closeDialog() {
				this.show = false
				if(this.type == 'receive' && this.user?.isFirstRegistration === true) {
					//更新用户状态
					this.$store.commit('UPDATE_USERINFO', { isFirstRegistration: false });
					//this.$emit('close', null);
					this.showOtherPopup(null)
				}else{
					//this.$emit('close', this.type);
					this.showOtherPopup(this.type)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.dialog{
		align-items: center;
		justify-content: center;
		touch-action: none;
		&.full-screen{
			z-index: 999;
			width: 100%;
			margin: $pc-margin;
			overflow-y: auto;
			.dialogrank{
				width: 640rpx;
				border-radius: 30rpx;
				background-color: #FFFFFF;
				margin: 130rpx 0;
				.dialog-head{
					height: 180rpx;
					background-image: url("~@/public/images/other/jqlhb_bg.png");
					background-size: 640rpx 180rpx;
					align-items: flex-start;
					justify-content: flex-end;
					image{
						width: 64rpx;
						height: 64rpx;
					}
				}
				.dialog-nav{
					align-items: center;
					justify-content: flex-start;
					border-bottom: 1rpx #EDEDED solid;
					.nav-item{
						width: 33.33%;
						align-items: center;
						padding: 30rpx 0 0;
						height: 58rpx;
						&.active{
							text{
								color: #333333;
								font-size: 28rpx;
								font-weight: 500;
								line-height: 28rpx;
							}
						}
						text{
							flex: 2;
							font-size: 26rpx;
							font-weight: 400;
							color: #999999;
							line-height: 28rpx;
						}
						image{
							margin-top: 24rpx;
							width: 120rpx;
							height: 6rpx;
						}
					}
				}
				.dialog-body{
					padding-bottom: 20rpx;
					.rank-item{
						align-items: center;
						padding: 20rpx 30rpx;
						background-size: 48rpx 48rpx;
						background-position: top right;
						background-repeat: no-repeat;
						&.rank0{
							background-image: url("~@/public/images/components/1.png");
						}
						&.rank1{
							background-image: url("~@/public/images/components/2.png");
						}
						&.rank2{
							background-image: url("~@/public/images/components/3.png");
						}
						.rank-avatar{
							position: relative;
							align-items: center;
							padding-bottom: 20rpx;
							.image{
								width: 96rpx;
								height: 96rpx;
							}
							button{
								position: absolute;
								top: 76rpx;
								width: 96rpx;
								font-size: 20rpx;
								color: #FFFFFF;
								line-height: 40rpx;
								background: #0055FF;
								border-radius: 20rpx;
								margin: 0;
								padding: 0;
								border: none;
								&.fav{
									line-height: 36rpx;
									background: #FFFFFF;
									border: 2rpx solid #0055FF;
									color: #0055FF;
									box-sizing: border-box;
								}
								&.nochat{
									border-color: #99BBFF;
									color: #99BBFF;
								}
							}
						}
						.rank-content{
							margin-left: 30rpx;
							flex: 2;
							.expert-info{
								align-items: center;
								.expert-name{
									font-size: 30rpx;
									font-weight: 500;
									line-height: 30rpx;
								}
							}
							.expert-tag{
								margin-top: 20rpx;
								align-items: center;
								width: fit-content;
								.tag-blue{
									margin-left: 0;
									margin-right: 10rpx;
								}
								.tag-red{
									margin-left: 0;
								}
								.tag-gold{
									margin-left: 0;
								}
							}
						}
						.rank-score{
							align-items: flex-end;
							.score-num{
								font-size: 36rpx;
								font-family: Arial;
								font-weight: bold;
								line-height: 36rpx;
							}
							.score-des{
								margin-top: 14rpx;
								font-size: 20rpx;
								line-height: 24rpx;
							}
						}
					}
				}
			}
			.dialogpop{
				margin: 130rpx 0;
				.popup-body{
					align-items: center;
					max-width: 600rpx;
					position: relative;
					.bgimg{
						width: 600rpx;
						height: 790rpx;
						border-radius: 30rpx;
						&.h850{
							height: 850rpx;
						}
						&.h570{
							height: 570rpx;
						}
						&.h480{
							height: 480rpx;
						}
					}
					.button{
						align-items: center;
						cursor: pointer;
						position: absolute;
						height: 140rpx;
						image{
							width: 452rpx;
							height: 145rpx;
						}
						bottom: 60rpx;
					}
					.expert{
						background-color: #FFFFFF;
						border-radius: 20rpx;
						position: absolute;
						top: 142rpx;
						width: 540rpx;
						height: 560rpx;
						.expert-box{
							align-items: center;
							padding: 16rpx 20rpx;
							box-shadow: 0rpx 1rpx 0rpx 0rpx #EDEDED;
							.expert-avatar{
								width: 88rpx;
								height: 88rpx;
							}
							.expert-info{
								flex: 2;
								margin-left: 20rpx;
								.expert-name{
									font-size: 32rpx;
									font-weight: 500;
									line-height: 1;
								}
								.expert-tag{
									margin-top: 15rpx;
									width: fit-content;
									.tag-red, .tag-gold{
										margin-left: 0;
									}
								}
							}
							.author-result-score{
								align-items: flex-end;
							}
						}
						.expert-des{
							position: relative;
							box-sizing: border-box;
							padding: 20rpx 20rpx 0;
							overflow: hidden;
							/* overflow: hidden;
							text-overflow: ellipsis;
							word-break: break-all;
							line-clamp: 3;
							-webkit-line-clamp: 3;
							-webkit-box-orient: vertical;
							display: -webkit-box;
							padding: 0 35rpx;
							text-align: center; */
							/deep/ .html-content {
								color: #666666;
								font-size: 24rpx;
								line-height: 40rpx;
								p, span, div {
									margin: 0;
								}
								img {
									display: none;
								}
							}
						}
						.expert-result-title{
							align-items: center;
							margin: 25rpx 0 0;
							.line{
								width: 40rpx;
								height: 2rpx;
								background: #333333;
							}
							.text{
								margin: 0 20rpx;
								font-size: 26rpx;
								line-height: 26rpx;
							}
						}
						.expert-result-list{
							margin-top: 20rpx;
							.ball{
								&.red{
									background-image: url("~@/public/images/other/h_bg.png");
								}
								&.black{
									background-image: url("~@/public/images/other/ha_bg.png");
									&.continue{
										background-image: url("~@/public/images/other/ha_bg.png");
									}
								}
								&.water{
									background-image: url("~@/public/images/other/z_bg.png");
								}
							}
						}
					}
					.expert::after{
						position: absolute;
						content: "";
						left: 0;
						bottom: 0;
						width: 100%;
						height: 60rpx;
						background: linear-gradient(0deg, #FFFFFF 0%, rgba(255,255,255,0) 100%);
						border-radius: 0rpx 0rpx 20rpx 20rpx;
					}
					.expert-btn{
						position: absolute;
						top: 732rpx;
						padding: 0;
						margin: 0;
						width: 540rpx;
						height: 88rpx;
						background: #FFF;
						border-radius: 44rpx;
						box-sizing: border-box;
						font-size: 32rpx;
						font-weight: 500;
						line-height: 88rpx;
					}
					.notice-detail{
						align-items: center;
						justify-content: space-between;
						position: absolute;
						top: 142rpx;
						width: 540rpx;
						height: 308rpx;
						overflow: hidden;
						&.more{
							height: 398rpx;
						}
						.detail-text{
							align-self: flex-start;
							margin: 40rpx;
							max-height: 229rpx;
							overflow-y: auto;
							scrollbar-width: none;
							-ms-overflow-style: none;
							-webkit-overflow-scrolling: touch;
							
							.text{
								color: #666666;
								font-size: 26rpx;
								line-height: 36rpx;
							}
							&::-webkit-scrollbar {
								display: none;
							}
						}
						.detail-btn{
							width: 100%;
							height: 88rpx;
							text-align: center;
							box-shadow: 0px -1px 0px 0px #EDEDED;
							border-radius: 0px 0px 20rpx 20rpx;
							font-size: 32rpx;
							color: #0055FF;
							line-height: 88rpx;
							cursor: pointer;
						}
					}
				}
				.coupon{
					align-items: center;
					position: relative;
					height: 848rpx;
					.coupon-box{
						position: relative;
						.bgimg{
							width: 660rpx;
							height: 848rpx;
						}
						.detail{
							align-items: center;
							color: #FA0106;
							position: absolute;
							top: 500rpx;
							right: 120rpx;
							.detail-title{
								font-size: 60rpx;
								font-family: Arial Black;
							}
							.detail-desc{
								margin-top: 15rpx;
								font-size: 20rpx;
							}
						}
					}
					.button{
						align-items: center;
						position: absolute;
						bottom: 50rpx;
						height: 96rpx;
						image{
							width: 480rpx;
							height: 96rpx;
						}
					}
					.desc{
						position: absolute;
						bottom: 170rpx;
						//right: 80rpx;
						font-size: 24rpx;
						line-height: 24rpx;
						color: #FFFFFF;
					}
				}
				.coupon.discount{
					height: 804rpx;
					.coupon-box{
						.bgimg{
							height: 804rpx;
						}
						.detail{
							color: #AB26F9;
							position: absolute;
							top: 430rpx;
							right: 110rpx;
							.detail-title{
								font-size: 60rpx;
								font-family: Arial;
								font-weight: bold;
							}
							.detail-desc{
								margin-top: 15rpx;
								font-size: 20rpx;
							}
						}
					}
					.button{
						bottom: 90rpx;
					}
					.desc{
						bottom: 210rpx;
					}
				}
				.popup-close{
					align-items: center;
					margin-top: 60rpx;
					cursor: pointer;
					image{
						width: 80rpx;
						height: 80rpx;
					}
				}
			}
			.dialogrec{
				width: 690rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				margin: 130rpx 0;
				.rec-body{
					.list-title{
						margin: 40rpx 0 30rpx 40rpx;
						font-size: 36rpx;
						font-weight: 500;
					}
					.list-body{
						flex-wrap: wrap;
						.list-item{
							width: 25%;
							.avatar{
								position: relative;
								width: 96rpx;
								height: 96rpx;
								.select-icon{
									position: absolute;
									right: 0;
									bottom: 0;
									width: 40rpx;
									height: 40rpx;
								}
							}
							.text-secondary{
								margin-top: 15rpx;
							}
							.text-mini{
								margin-top: 15rpx;
								max-width: 160rpx;
								letter-spacing: 0rpx;
								color: #999999;
								&.color-red{
									color: #F23030;
									background: #FFF2F2;
									border-radius: 4rpx;
									height: 32rpx;
									line-height: 32rpx;
									padding: 0 14rpx;
									box-sizing: border-box;
								}
							}
						}
						.list-item:nth-child(n+5){
							margin-top: 20rpx;
						}
					}
				}
				.rec-foot{
					margin-top: 40rpx;
					width: 100%;
					height: 120rpx;
					background: #FFFFFF;
					box-shadow: 0rpx -1rpx 0rpx 0rpx #EDEDED;
					border-radius: 0rpx 0rpx 20rpx 20rpx;
					box-sizing: border-box;
					justify-content: space-evenly;
					.button{
						width: 300rpx;
						height: 88rpx;
						background: #FFFFFF;
						border: 2rpx solid #CCCCCC;
						border-radius: 44rpx;
						box-sizing: border-box;
						font-size: 32rpx;
						color: #666666;
						padding: 0;
						margin: 0;
						&.active{
							border: none;
							color: #FFFFFF;
							background: #0055FF;
						}
					}
				}
			}
			.dialoghot{
				width: 600rpx;
				margin: 130rpx 0;
				transition: height 0.5s ease;
				height: fit-content;
				.hot-head{
					position: relative;
					width: 560rpx;
					height: 100rpx;
					background: linear-gradient(90deg, #FF0F00 0%, #CC0000 100%);
					border-radius: 20rpx 20rpx 0rpx 0rpx;
					.text-icon{
						width: 219rpx;
						height: 45rpx;
						margin-left: 30rpx;
					}
					.change-btn{
						width: 120rpx;
						height: 48rpx;
						border: 2rpx solid #FFFFFF;
						border-radius: 24rpx;
						background-color: #F23030;
						box-sizing: border-box;
						padding: 0;
						margin: 0 70rpx 0 0;
					}
					.close-icon{
						position: absolute;
						width: 48rpx;
						height: 48rpx;
						top: 0;
						right: 0;
					}
				}
				.hot-body{
					width: 600rpx;
					background: linear-gradient(0deg, #FFFFFF 1%, #FFE6E5 100%);
					border-radius: 20rpx;
					padding: 20rpx;
					box-sizing: border-box;
					.barinfo{
						padding: 0 10rpx;
						.barinfo-logo{
							width: 80rpx;
							height: 80rpx;
						}
						.barinfo-name{
							flex: 2;
							margin: 0 20rpx;
							font-weight: 800;
						}
						.barinfo-favbtn{
							height: 48rpx;
							background: #FFCCCC;
							border-radius: 24rpx;
							padding: 0 20rpx;
							margin: 0;
						}
					}
					.discuss{
						//max-height: 860rpx;
						padding: 20rpx;
						box-sizing: border-box;
						background: #F21818;
						border-radius: 10rpx;
						.discuss-title{
							max-width: 520rpx;
							font-weight: 500;
							line-height: 45rpx;
						}
						.discuss-info{
							margin: 15rpx 0;
							color: #FFB2B2;
						}
						.discuss-detail{
							position: relative;
							max-height: 600rpx;
							overflow: hidden;
							word-break: break-all;
							/deep/ .html-content{
								font-size: 24rpx;
								font-weight: 400;
								line-height: 36rpx;
								color: #FFFFFF !important;
								background-color: transparent !important;
								p, span, div {
									margin: 0;
									color: #FFFFFF !important;
									background-color: transparent !important;
								}
								img {
									display: none;
								}
							}
							.vote-info{
								margin-top: 10rpx;
								max-height: 600rpx;
								overflow-y: auto;
								scrollbar-width: none;
								-ms-overflow-style: none;
								-webkit-overflow-scrolling: touch;
								.vote-other{
									padding-bottom: 15rpx;
									.vote-item{
										margin-top: 15rpx;
										width: 100%;
										height: 72rpx;
										background: transparent;
										border: 2rpx solid #FFF;
										border-radius: 36rpx;
										box-sizing: border-box;
										padding: 0 30rpx;
										position: relative;
										overflow: hidden;
										.progress{
											position: absolute;
											left: 0;
											top: 0;
											bottom: 0;
											background: #FFFFFF;
											opacity: 0.3;
											z-index: 1;
										}
										.left{
											z-index: 2;
											max-width: 450rpx;
											margin-right: 10rpx;
											.select-icon{
												flex: 1;
												margin-left: 20rpx;
												min-width: 32rpx;
												width: 32rpx;
												height: 32rpx;
											}
										}
										&.active{
											.progress{
												background: #FFFFFF;
												opacity: 0.6;
											}
										}
										.text-hidden{
											max-width: 550rpx;
										}
										&:first-child{
											margin-top: 0;
										}
									}
								}
								&::-webkit-scrollbar {
									display: none;
								}
							}
							.video-info{
								margin-top: 10rpx;
							}
							.mask-view{
								position: absolute;
								width: 100%;
								height: 40rpx;
								left: 0;
								bottom: 0;
								background: linear-gradient(0deg, #F21818 0%, rgba(242,24,24,0) 100%);
							}
						}
						.discuss-btn{
							width: 120rpx;
							height: 48rpx;
							background: #FFFEFF;
							border-radius: 6rpx;
							font-weight: 500;
							margin: 20rpx 0 10rpx auto;
							padding: 0;
						}
					}
				}
			}
		}
		.bounceout{
			animation-duration: 0.4s;
			animation-fill-mode: both;
			animation-name: showAnimation;
		}
		.heightam{
			transform-origin: 50% 0%;
			animation-duration: 0.6s;
			animation-fill-mode: both;
			animation-name: heightAnimation;
		}
	}
	@keyframes showAnimation {
		0% {
			opacity: 0;
			transform: scale(0.1);
		}
		100% {
			opacity: 1;
			transform: scale(1);
		}
	}
	@keyframes heightAnimation {
		0% {
			max-height: 200rpx;
		}
		100% {
			max-height: 860rpx;
		}
	}
</style>